<template>
    <div class="container">
        <div class="location-header">
            <div class="headers">
                <span @click="fanhui">&lt;</span>
                <input v-model="keyword" placeholder="请输入">

            </div>
        </div>
        <div class="map">


            <!-- <baidu-map class="bm-view" :zoom="mapZoom" :scroll-wheel-zoom="true" @ready="onReady" :center="center">
            </baidu-map> -->


            <!--地图模块-->

            <!-- getPoint方法，给地图加点击事件，点击地图获取所需要的信息，-->
            <!--scroll-wheel-zoom属性是否可以用鼠标滚轮控制地图缩放-->
            <baidu-map class="map" id="mapID" center="杭州市" :zoom="zoom" :scroll-wheel-zoom="true" @click="getPoint">
                <!--地图类型，两种：一种是路线一种是绿的那种-->
                <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT">
                </bm-map-type>
                <!--地图搜索功能，绑定上面的input，-->
                <!--zoom是搜索结果的视图比例，个人觉得12.8很舒服显示-->
                <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" zoom="12.8"
                    style="display: none"></bm-local-search>
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <!--信息窗口，show属性是控制显示隐藏，infoWindowClose和infoWindowOpen是控制信息窗口关闭隐藏的方法-->
                <bm-marker :position="postionMap">
                    <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen"
                        style="font-size: 14px">
                        <p>站点：{{ add.siteName }}</p>
                        <p>站点地址：{{ add.site }}</p>
                    </bm-info-window>
                </bm-marker>
            </baidu-map>

        </div>

    </div>
</template>

<script>


export default {
    data() {
        return {

            jgNameDialog: false,
            show: false,
            postionMap: {  //地图坐标
                lng: 120.211486,
                lat: 30.256576
            },
            location: '',
            keyword: '',  //搜索框关键词
            zoom: 12.8,   //放大比例
            address: '',   //位置详细信息
            add: {
                siteName: '',
                site: '',
                jd: '',
                wd: '',
                desce: '',
                type: '',
                jgName: '',
                jgNum: '',
            },
            organizationData: [],
            jgName: '',
            jgNum: '',

        }


    },
    methods: {
        getPoint(e, BMap) {    //点击地图获取一些信息，
            this.show = true;
            this.postionMap.lng = e.point.lng;     //通过  e.point.lng获取经度
            this.postionMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
            this.add.jd = e.point.lng;
            this.add.wd = e.point.lat;
            this.zoom = e.target.getZoom()

            let geocoder = new BMap.Geocoder();  //创建地址解析器的实例
            geocoder.getLocation(e.point, rs => {
                this.add.site = rs.address;

            });
        },
        infoWindowClose() {
            this.show = false
        },
        infoWindowOpen() {
            //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
            //并且信息窗口点击一次显示，一次消失
            //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
            setInterval(() => {
                this.show = true
            }, 100)
        },
        fanhui() {
            this.$router.go(-1)
        }
    }



}

</script>

<style lang="scss">
.location-header {
    width: 100%;

    .headers {
        width: 90%;
        margin: 10px auto;
        display: flex;

        input {
            width: 315px;
            padding-left: 10px;
            font-size: 14px;
            border: none;
            background-color: #f5f5f5;
        }

        span {
            font-family: "仿宋";
            font-size: 25px;
            font-weight: 600;
            margin-right: 10px;
        }

        p {
            width: 314px;
            height: 30px;
            background-color: #f5f5f5;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #aaa4a6;
        }
    }
}

.map {
    width: 100%;
    height: 600px;
    position: relative;

    .bm-view {
        height: 618px;
    }

    img {
        width: 100%;
    }

    .imgs {
        img {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 63%;
            left: 46%;
        }
    }
}

.positioning {
    width: 100%;

    .item {
        width: 100%;
        border-bottom: 1px solid #eaeaea;
        margin-top: 15px;

        strong {
            margin-left: 20px;
        }

        p {
            font-size: 12px;
            color: #bebebe;
            margin: 5px 0 10px 20px;
        }
    }
}
</style>